<style src="../static/css/prism.css">

</style>

<template>
    <div>
        <el-row>
            <el-col :span="12" :push="6">
                <el-card>
                    <div class="markdown-body" ref="mdcontent" v-html="content"/>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
  name: 'Index',
  created() {
      this.setContent();
  },
  data() {
      return {
          content : null,
      }
  },
  computed: {
      articleId() {
          return this.$route.params.id
      },
      articleUrl() {
          return this.$store.getters.getPathPrefix() + "article";
      }
  },
  methods: {
      setContent : function() {
          var url = this.articleUrl + '/' + this.articleId;
          var parmas = {};
          parmas.url = url;
          parmas.method = 'get';
          parmas.responseType = 'blob';
          this.$axios(parmas)
          .then((response) => {
              if(response.data != null) {
                let blob = new Blob([response.data]);
                blob.text().then(text => {
                    this.content = this.$MarkdownRender(text);
                });
                  
              }
          })
      }
  },
  components: {

  }
}
</script>